<template>
	<view class="cu-back-top animation-reverse" :class="animationSlide" :style="[{
		bottom: bottom + 'rpx',
		right: right + 'rpx',
		borderRadius: pattern == 'circle' ? '99999rpx' : '8rpx',
		zIndex: zIndex,	
		fontSize:textSize+'rpx'
	}, customStyle]">
		<view class="" @click="backToTop">
			<text class="cuIcon-top"></text>
		</view>
		<view class="">
		</view>
	</view>
</template>

<script>
	/**
	 * 右下角悬浮按钮，默认为回到顶部
	 */
	export default {
		name: 'cu-back-top',
		props: {
			pattern: {
				type: String,
				default: 'circle'
			},
			textSize: {
				type: [Number, String],
				default: 35
			},
			// 返回顶部滚动时间
			duration: {
				type: [Number, String],
				default: 100
			},
			// 滚动距离
			scrollTop: {
				type: [Number, String],
				default: 0
			},
			// 距离顶部多少距离显示，单位rpx
			top: {
				type: [Number, String],
				default: 400
			},
			// 返回顶部按钮到底部的距离，单位rpx
			bottom: {
				type: [Number, String],
				default: 200
			},
			// 返回顶部按钮到右边的距离，单位rpx
			right: {
				type: [Number, String],
				default: 40
			},
			// 层级
			zIndex: {
				type: [Number, String],
				default: '999'
			},
			// 整个组件的样式
			customStyle: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		watch: {
			scrollTop(nVal, oVal) {			
				if (nVal > uni.upx2px(this.top)) {					
					this.animationSlide = 'top-show';
				} else if(this.animationSlide != ''){					
					this.animationSlide = 'top-hidden';
				}
			}
		},
		data() {
			return {				
				animationSlide:''
			}
		},
		methods: {
			backToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: this.duration
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.cu-back-top {
		width: 80rpx;
		height: 80rpx;
		position: fixed;	
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #a21fa3;
		color: #FFFFFF;
		align-items: center;		
		opacity: 0;
		box-shadow: 0px 0px 3px 1px rgba(26, 26, 26, 0.2);
	}
	.top-show{
		opacity: 1;
	}
	.top-hidden{
		opacity: 0;
	}
</style>
